<#include
        "/common/coms.html"/> <@layout>

<!-- ace styles -->

<script type="text/javascript">
	var AppId='${(AppId)!}';
    /**
     * 新增
     */
    function saveModel() {

        var type=document.getElementById("type").value;
        var level=document.getElementById("level").value;
        var key=document.getElementById("key").value;
        var url=document.getElementById("url").value;
        if(type=="click"   && key==""){
          alert("请输入key");
            return;
        }
        if(type=="view"   && url==""){
            alert("请输入URL");
            return;
        }
        var id=document.getElementById("id").value;
        if(Validator.Validate(document.getElementById('form1'))){
        } else {
            return;
        }

        var url = '';
        if(id==""){
            url = '${ctx}/wxMenu/save';
        }     else{
            url = '${ctx}/wxMenu/update';
        }

        $('#form1').form('submit', {
            url : url,
            onSubmit : function() {
                return $(this).form('validate');
            },
            success : function(data) {
                alert(data);
                parent.location.reload();
            }
        });

    }

    function dels(){
        var url = '${ctx}/wxMenu/delete/';
        document.getElementById("id").value  =  id;
        $('#form1').form('submit', {
            url : url,
            onSubmit : function() {
            },
            success : function(data) {
                // 回填页面
                alert(data);
                parent.window.location.reload();
            }
        });
    }
    function creatmenu(){
        var url = '${ctx}/wxMenu/setMenu/';
        $('#form1').form('submit', {
            url : url,
            onSubmit : function() {
            },
            success : function(data) {
                // 回填页面
                alert(data);
            }
        });
    }

    function changekey(obj){
        if(obj.value=="click"){
            $("#keys").show();
            $("#urls").hide();
        } else if (obj.value=="view"){
            $("#keys").hide();
            $("#urls").show();
        }  else {
            $("#keys").hide();
            $("#urls").hide();
        }
    }
    function returnlast(){
    	parent.window.location.href="${ctx}/";
    }
</script>

<div class="page-header" style="height: 20px">

    <div class="row-fluid">
        <div class="span12">
            <!-- PAGE CONTENT BEGINS -->
            <div class="tabbable tabs-left">
                <form class="form-horizontal"  id="form1" method="post" >
                    <input type="hidden"  name="wxMenu.id" id="id"    >
                    <table class="table table-condensed table-bordered">
                        <tr class="info">
                            <td colspan="4" style="text-align: left">
                                <a href="#"  class="btn btn-info btn-small" onclick="add()"   >新增 </a>
                                &nbsp; &nbsp;&nbsp;&nbsp;
                                <#if (id) !="0" >
                                <a href="#"  class="btn btn-success btn-small bigger-110"  onclick="edit();"  >修改 </a>

                                &nbsp; &nbsp;&nbsp;&nbsp;
                                <a href="#"  class="btn btn-danger btn-small bigger-110"  onclick="dels();"  >删除 </a>
                                </#if>      &nbsp; &nbsp;&nbsp;&nbsp;
                                <a href="#"  class="btn btn-grey btn-small bigger-110"  onclick="creatmenu();"  >创建菜单 </a>
                                <p class="alert alert-info">
                                    目前自定义菜单最多包括3个一级菜单，每个一级菜单最多包含5个二级菜单。一级菜单最多4个汉字，二级菜单最多7个汉字，多出来的部分将会以“...”代替。请注意，创建自定义菜单后，由于微信客户端缓存，需要24小时微信客户端才会展现出来。建议测试时可以尝试取消关注公众账号后再次关注，则可以看到创建后的效果。                                </p>
                            </td>
                        </tr>
                        <tr class="info">
                            <td style="text-align: left;white-space:nowrap;">标题:</td>
                            <td >
                                <input id="name"
                                         name="wxMenu.name" type="text"
                                         style="min-height: 24px;"  maxlength="6" dataType="Require" msg="请输入标题" />
                            </td>
                        </tr>
                        <tr class="info">
                        <td style="text-align: left;white-space:nowrap;">类型:</td>
                            <td >
                                <select name="wxMenu.type" id="type" onchange="changekey(this);"    panelHeight="100">
                                    <option value="" selected>无</option>
                                    <option value="click" >点击推送事件</option>
                                    <option value="view">跳转URL</option>
                                </select>
                            </td>
                        </tr>

                        <tr class="info" style="display: none" id="keys">
                            <td style="text-align: left;white-space:nowrap;">点击推送事件key值:</td>
                            <td > <input id="key"
                                         name="wxMenu.key" type="text"
                                         style="min-height: 24px;"  maxlength="30" require="false"  dataType="Require" msg="请输入KEY" />    必须
                            </td>
                        </tr>
                        <tr class="info"  style="display: none" id="urls">
                        <td style="text-align: left;white-space:nowrap;">跳转URL类型:</td>
                            <td > <input id="url"
                                         name="wxMenu.url" type="text"   placeholder="http://xxxx"
                                         style="min-height: 24px;" maxlength="350"  require="false"   />  必须
                                            <a href="#"  class="btn btn-danger btn-small" onclick="urls('url')"   >转换 </a>
                            </td>
                        </tr>

                        <tr class="info">
                        <td style="text-align: left;white-space:nowrap;">级别:</td>
                            <td > <input id="level"
                                         name="wxMenu.level" type="text"
                                         style="min-height: 24px;"  readonly />
                                <input id="pid"
                                       name="wxMenu.pid" type="hidden"
                                       style="min-height: 24px;"  readonly />
                            </td>
                        </tr>

                        <tr class="info">
                            <td style="text-align: left;white-space:nowrap;">顺序号:</td>
                            <td > <input id="sxh"
                                         name="wxMenu.sxh" type="text"
                                         style="min-height: 24px;"   />
                            </td>
                        </tr>
                        <tr class="info">
                            <td style="text-align: left;white-space:nowrap;">有效标志:</td>
                            <td >
                                <select name="wxMenu.yxbz" id="yxbz"    panelHeight="100">
                                    <option value="1" selected>有效</option>
                                    <option value="0">无效</option>
                                </select>
                            </td>

                        <tr class="info">
                            <td colspan="4" style="text-align: center">
                                <a href="#"  class="btn btn-info btn-small" onclick="saveModel()"   >确定 </a>
                                &nbsp; &nbsp;&nbsp;&nbsp;
                                <a href="#"  class="btn btn-danger btn-small bigger-110"  onclick="returnlast();"  >取消 </a>
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>
    </div>
</div>

</body>

<script>
function getUrlVars(){
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}

function urls(ctrlName){
	var url=$('#'+ctrlName).val();
	var newUrl = encodeURIComponent(url);
	var reNewUrl = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=${(AppId)!}&redirect_uri=' + newUrl + '&response_type=code&scope=snsapi_base&state=123#wechat_redirect';
	$('#' + ctrlName).val(reNewUrl);
}
    /**
     * 修改页面使用
     */

    <#list newlist as m>
    var name  =  '${(m.name)!}';
    var   type  =  '${(m.type)!}';
    var   key  =  '${(m.key)!}';
    var   url  =  '${(m.url)!}';
    var   pid  =  '${(m.pid)!}';
    var   level  =  '${(m.level)!}';
    var   yxbz  =  '${(m.yxbz)!}';
    var id =  '${(m.id)!}';
    var sxh =  '${(m.sxh)!}';

    if(type=="click"){
     $("#keys").show();
     $("#urls").hide();
    } else if (type=="view"){
        $("#keys").hide();
        $("#urls").show();
    }
    document.getElementById("id").value  =  '${(m.id)!}';
    document.getElementById("name").value  =  '${(m.name)!}';
    document.getElementById("type").value  =  '${(m.type)!}';
    document.getElementById("key").value  =  '${(m.key)!}';
    document.getElementById("url").value  =  '${(m.url)!}';
    document.getElementById("pid").value  =  '${(m.pid)!}';
    document.getElementById("level").value  =  '${(m.level)!}';
    document.getElementById("yxbz").value  =  '${(m.yxbz)!}';
    document.getElementById("sxh").value  =  '${(m.sxh)!}';

    </#list>

    function add (){
        if(${(id)!} !=0){
            document.getElementById("level").value  =  '2';
        } else {
            document.getElementById("level").value  =  '1';
        }
        document.getElementById("id").value  =  '';
        document.getElementById("name").value  =  '';
        document.getElementById("type").value  =  '';
        document.getElementById("key").value  =  '';
        document.getElementById("url").value  =  '';
        document.getElementById("pid").value  =  '${(id)!}';
        document.getElementById("yxbz").value  =  '1';
        document.getElementById("sxh").value  =  '';
    }
    function edit (){
            document.getElementById("id").value  =  id;
            document.getElementById("name").value  =  name;
            document.getElementById("type").value  = type;
            document.getElementById("key").value  =  key;
            document.getElementById("url").value  =  url;
            document.getElementById("pid").value  =  pid;
            document.getElementById("level").value  = level;
            document.getElementById("yxbz").value  = yxbz;
        document.getElementById("sxh").value  = sxh;
    }
</script>
</@layout>
